// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'


import MintUI from 'mint-ui' //ui组件引入   npm安装依赖
import 'mint-ui/lib/style.css'
import {
  Button,
  Cell
} from 'mint-ui'
import {
  Swipe,
  SwipeItem
} from 'mint-ui';
import { //图片懒加载
  Lazyload
} from 'mint-ui';
import {
  Switch
} from 'mint-ui';
Vue.component(Switch.name, Switch);
Vue.use(Lazyload);
Vue.use(Button)
Vue.use(Cell)
Vue.use(MintUI)
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);







//mui组件引入
import "./mui/css/mui.css"; //引入自己下载的mui包
import "./mui/css/icons-extra.css"
//引用mui.js会发生错误因为mui 不支持严格模式 vue-cli是严格模式  
//解决办法   在babelrc 加"ignore": ["./src/mui/js/mui.min.js"],
import mui from './mui/js/mui.min.js'
Vue.prototype.mui = mui




//安装图片预览插件  vue-previews
import Vuepreview from 'vue-preview'
Vue.use(Vuepreview)
import "./components/homephoto/info.css" //样式写在.vue无法应用 需要到main.js 引入




//挂载swiper
// import "./swiper/swiper.animate1.0.3.min.js"
// import "./swiper/animate.css"
// import "./swiper/swiper.min.js"





//全局过滤器                           //自定义时间过滤器 
Vue.filter('dataFormat', function (datastr, pattern = '') {
  let data = new Date(datastr)
  let year = data.getFullYear()
  let month = data.getMonth() + 1;
  let day = data.getDate()
  let hour = data.getHours()
  let minute = data.getMinutes()
  let second = data.getSeconds()
  // return year + '-' + month + '-' + day
  if (pattern.toLowerCase() === 'yyyy-mm-dd') {
    return `${year}-${month}-${day}`
  } else {
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`
  }

})




//导入  vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource)
//设置api的根路径
// Vue.http.options.root = '';//这里设置后  全局可以使用  (请求时   this.$http.get(api)开头不可以加/)
Vue.http.options.emulateJSON = true //全局设置表单数据格式

Vue.config.productionTip = false //







//引入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
//进去刷新 并获得本地储存中的数据
var loc = JSON.parse(localStorage.getItem('loc') || '[]')
// console.log(typeof loc[0].count)
// console.log(loc)
// localStorage.clear(); //清除网页缓存数据
var store = new Vuex.Store({
  state: { //this.$store.state.xxx
    car: loc, //将商品的数据存进来   //详情{id:商品的id，count:购买数量，price:商品的单价，switch:商品的选中状态
  },
  mutations: { //this.$store.commit('方法名'，'按需传的参数')
    //添加方法把 商品内容添加到car里面
    addtocar(state, goodsdetails) {
      var flag = false //
      // 如果数据中已经添加过了  那么只更新就可以了 如果没有就添加
      state.car.some(item => { //some遍历检查数组    如果有相同的id 就组成一个新的数组
        if (item.id == goodsdetails.id) {
          item.count += parseInt(goodsdetails.count)
          flag = true
          return true
        }
      })

      if (flag == false) { //判断是否有添加过商品  如果添加过不会跳到这个判断里
        state.car.push(goodsdetails) //将商品添加到car
      }
      localStorage.setItem('loc', JSON.stringify(state.car)) //数据存入本地储存
    },

    changnumbox(state, goodsnumbox) { //购物车购买数量同步
      state.car.some(item => {
        if (item.id == goodsnumbox.id) { //如果id相同才可以进行后续操作
          item.count = parseInt(goodsnumbox.count)
          return true;
        }
      })
      localStorage.setItem('loc', JSON.stringify(state.car)) //更改后再次存入本地刷新数据
    },
    // 删除
    shopcarremove(state, id) {
      state.car.some((item, i) => {
        if (item.id == id) { //找到相同的id 进行删除
          state.car.splice(i, 1)
        }
      })
      localStorage.setItem('loc', JSON.stringify(state.car)) //更改后再次存入本地刷新数据
    },
    //同步状态 switchs
    getshopcarswitch(state, switchdata) {
      state.car.some(item => {
        if (item.id == switchdata.id) {
          item.switchs = switchdata.switchs
          // console.log(item.switchs)
          // console.log(1)
        }
      })
      localStorage.setItem('loc', JSON.stringify(state.car)) //更改后再次存入本地刷新数据
    }
  },
  getters: { //this.$store.getters.xxx
    //这个属性相当于vue 的计算属性
    getallcount(state) { //计算增加购物车时
      var a = 0;
      state.car.forEach(item => {
        item.count = parseInt(item.count)
        a += item.count
      })
      return a
    },
    getshopcarcount(state) { //计算购物车数量
      var b = {};
      state.car.forEach(item => {
        b[item.id] = parseInt(item.count) //匹配
        // console.log(b)
      })
      return b
    },
    getselect(state) { //计算 开关为false 还是true 
      var c = {}
      state.car.forEach(item => {
        c[item.id] = item.switchs //id 和switchs相对应
      })
      return c
    },
    //计算总数和总价
    gettotal(state) {
      var d = {
        zongshu: 0,
        zongjia: 0
      }
      state.car.forEach(item => {
        if (item.switchs == true) {
          d.zongshu += item.count //总数
          d.zongjia += item.price * item.count //总价
        }
      })
      return d
    }
  },
})







/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, //挂载路由
  components: {
    App
  },
  template: '<App/>',
  // render函数是渲染一个视图， 然后提供给el挂载， 如果没有render那页面什么都不会出来现在用的是components挂载
  // render: h => h(App)     //功能和components一样 不过render是2.0的写法 
  store //  挂载到状态管理对象  （vuex） 

})
